<template>
    <div class="oy-tabs el-tabs el-tabs--card">
        <div class="el-tabs__header is-top">
            <div class="el-tabs__nav-wrap is-top">
                <div class="el-tabs__nav-scroll">
                    <div class="tabs-nav-prev-buts">
                        <slot name="tabsNavPrevButtons"></slot>
                    </div>
                    <div class="tabs-nav-prev" :class="[showPrevNextTabNav?'':'tabs-nav-hidden']"
                         @click="tabScrollPrevClick"><i
                            class="el-icon-arrow-left"></i></div>
                    <div ref="tabsList" class="oy-tabs-nav el-tabs__nav is-top" style="transform: translateX(0px);">
                        <div :id="`tab-${tab.index}`" v-for="tab in tabs" :key="tab.index" @click="tabItemClick(tab)"
                             class="el-tabs__item is-top" @click.right="tabItemMouseRightClick(tab,$event)"
                             :class="[tab.index===currentIndex?'is-active':'',tab.closable?'is-closable':'']">
                            <span slot="label">
                                <i :class="[tab.icon?tab.icon:'el-icon-document']"></i> {{tab.title?tab.title:tab.name}}</span><span
                                class="el-icon-close"
                                @click.stop="tabItemCloseClick(tab)"></span>
                        </div>
                    </div>
                    <div class="tabs-nav-next" :class="[showPrevNextTabNav?'':'tabs-nav-hidden']"
                         @click="tabScrollNextClick"><i class="el-icon-arrow-right"></i></div>
                    <div class="tabs-nav-tools">
                        <slot name="tabsNavTools"></slot>
                    </div>
                </div>
            </div>
        </div>
        <tabs-context-menu :offsetLeft="tabMouseRightMenuData.offset" :index="tabMouseRightMenuData.index"
                           ref="tabMouseRightMenu"></tabs-context-menu>
        <div ref="content" class="tabs-content">
            <keep-alive>
                <transition name="slide-fade">
                    <slot name="tabsContent"></slot>
                </transition>
            </keep-alive>
        </div>
    </div>
</template>

<script>
    import Velocity from 'velocity-animate'
    import TabsContextMenu from "@/components/tabs/TabsContextMenu";

    export default {
        name: "Tabs",
        components: {
            TabsContextMenu: TabsContextMenu,
        },
        data() {
            return {
                //右键菜单配置
                tabMouseRightMenuData: {
                    index: '0',//tab的index
                    offset: '0',//tab的左偏移量
                },
                currentIndex: 0,//当前下标
                showPrevNextTabNav: false,//tab个数过多，显示左右滚动按钮
                tabs: [
                    // {index: 101, name: 'tab101',title:'tab101',closable:false,icon:''}
                ]
            }
        },
        created() {
            this.tabLastActive()
        },
        computed: {},
        mounted() {
            this.$router.push("/home");
        },
        methods: {
            /**
             *滑动控制
             */
            scroll(toLeft) {
                this.$nextTick(() => {
                    let navScroll = this.$el.querySelector(".el-tabs__nav-scroll");
                    let tabs = this.$el.querySelector(".el-tabs__nav");
                    if (tabs.scrollWidth > navScroll.clientWidth) {
                        let ceil = Math.ceil(tabs.scrollWidth / navScroll.clientWidth)
                        let currentScrollLeft = tabs.scrollLeft, offset = 0
                        if (toLeft === true) {
                            if (ceil > 1) {
                                offset = -1 * navScroll.clientWidth
                            } else {
                                offset = -1 * (tabs.scrollWidth - navScroll.clientWidth)
                            }
                        } else {
                            if (ceil > 1) {
                                offset = navScroll.clientWidth
                            } else {
                                offset = tabs.scrollWidth - navScroll.clientWidth
                            }
                        }
                        Velocity(tabs, {scrollLeft: (currentScrollLeft + offset) + 'px'})
                    }
                });
            },
            /**
             *tab个数过多，控制显示左右滑动按钮显示
             */
            displayPrevNextBtn() {
                this.$nextTick().then(() => {
                    let navScroll = this.$el.querySelector(".el-tabs__nav-scroll");
                    let tabs = this.$el.querySelector(".el-tabs__nav")
                    let buts = this.$el.querySelector(".tabs-nav-prev-buts")
                    let tools = this.$el.querySelector(".tabs-nav-tools")
                    if (tabs.scrollWidth + buts.clientWidth + tools.clientWidth + 60 > navScroll.offsetWidth) {
                        this.showPrevNextTabNav = true
                    } else {
                        this.showPrevNextTabNav = false
                    }
                })
            },
            /**
             *滑动控制
             */
            scroll2tab(index) {
                this.$nextTick(() => {
                    let tabs = this.$el.querySelector(".el-tabs__nav")
                    let tab = document.getElementById(`tab-${index}`)
                    Velocity(tabs, {scrollLeft: tab.offsetLeft + 'px'})
                })
            },
            /**
             *添加
             */
            tabAdd(tab) {
                let that = this;
                let filter = that.tabs.filter(t => t.index === tab.index)
                if (filter && filter.length > 0) {
                    that.tabActive(tab)
                    that.scroll2tab(tab.index)
                } else {
                    that.tabs.push(tab)
                    that.tabLastActive()
                    that.displayPrevNextBtn()
                }
            }
            ,
            /**
             * 激活最后一个tab
             */
            tabLastActive() {
                if (this.tabs && this.tabs.length > 0) {
                    let tab = this.tabs[this.tabs.length - 1]
                    this.tabActive(tab)
                    this.scroll2tab(tab.index)
                }
            }
            ,
            /**
             * 激活指定下标tab
             * @param tab
             */
            tabActive(tab) {
                this.currentIndex = tab.index
                this.$router.push({name: tab.name})
            },
            /**
             * 关闭当前
             */
            tabClose(index) {
                let filter = this.tabs.filter(t => t.index === index)
                if (filter && filter.length > 0) {
                    let tab = filter[0]
                    //有关闭按钮
                    if (tab.closable) {
                        if (this.tabs.length > 1) {
                            let lastIndex = this.tabs.lastIndexOf(tab)
                            if (lastIndex > 0) {
                                let prevTab = this.tabs[lastIndex - 1]
                                this.tabActive(prevTab)
                            } else {
                                let nextTab = this.tabs[lastIndex + 1]
                                if (nextTab) {
                                    this.tabActive(nextTab)
                                }
                            }
                        }
                        this.tabs = this.tabs.filter(t => t.index != index)
                        if (this.tabs.length <= 0) {
                            this.$router.push({name: 'Home'})
                        }
                        this.displayPrevNextBtn()
                    }
                }
            },
            /**
             *关闭其他
             */
            tabCloseOther(index) {
                let tabs = this.tabs.filter(x => x.index != index)
                if (tabs && tabs.length > 0) {
                    let indies = tabs.map(x => x.index)
                    this.tabCloseList(indies)
                }
            },
            /**
             *关闭所有
             */
            tabCloseAll() {
                if (this.tabs && this.tabs.length > 0) {
                    let indies = this.tabs.map(x => x.index)
                    this.tabCloseList(indies)
                }
            }
            ,
            /**
             * 批量关闭
             * @param e
             */
            tabCloseList(indies) {
                if (indies && Array.isArray(indies) && indies.length > 0) {
                    let items = []
                    this.tabs.forEach(x => {
                        if (indies.lastIndexOf(x.index) >= 0 && x.closable) {
                            items.push(x.index)
                        }
                    })
                    if (items.length > 0) {
                        this.tabs = this.tabs.filter(x => items.lastIndexOf(x.index) < 0)
                        if (this.tabs.length > 0) {
                            let last = this.tabs[this.tabs.length - 1]
                            this.tabActive(last)
                        } else {
                            this.$router.push({name: 'Home'})
                        }
                        this.displayPrevNextBtn()
                    }
                }
            }
            ,
            /**
             * 点击激活tab
             * @param e
             */
            tabItemClick(e) {
                let filter = this.tabs.filter(t => t.index === e.index)
                if (filter && filter.length > 0) {
                    this.tabActive(filter[0])
                }
            }
            ,
            /**
             * 关闭tab
             * @param e
             */
            tabItemCloseClick(e) {
                this.tabClose(e.index)
            },
            /**
             *鼠标右键菜单点击
             */
            tabItemMouseRightClick(tab, e) {
                this.$refs.tabMouseRightMenu.show = true
                this.tabMouseRightMenuData.index = tab.index
                this.tabMouseRightMenuData.offset = e.clientX + ''
                e.preventDefault()
            },
            /**
             * 右滑按钮点击
             */
            tabScrollNextClick() {
                this.scroll(false)
            },
            /**
             * 左滑按钮点击
             */
            tabScrollPrevClick() {
                this.scroll(true)
            },
        }
    }
</script>

<style scoped>

    .slide-fade-enter-active {
        transition: all .6s ease;
    }

    .slide-fade-leave-active {
        display: none;
    }

    .slide-fade-enter, .slide-fade-leave-to {
        transform: translateX(calc(210px - 100vw));
    }

    .oy-tabs .el-tabs__header {
        margin: 0;
    }

    .oy-tabs .el-tabs__nav-scroll {
        display: flex;
    }

    .oy-tabs .el-tabs__nav {
        overflow: hidden;
    }

    .tabs-nav-hidden {
        display: none;
    }

    .tabs-nav-prev, .tabs-nav-next {
        padding-left: 5px;
        padding-right: 5px;
        cursor: pointer;
        line-height: 50px;
        font-size: 12px;
        color: #909399;
    }

    .tabs-nav-prev:hover, .tabs-nav-next:hover {
        color: #409eff;
        cursor: pointer;
    }

    .tabs-nav-next, .tabs-nav-tools {
        margin-left: auto;
    }

    .tabs-nav-tools {
        display: flex;
    }

    .tabs-content {
        background-color: #ecf0f5;
        padding: 15px;
        overflow-y: auto;
        height: calc(100vh - 60px);
    }

    .oy-tabs-nav {
        position: relative;
    }

    .oy-tabs-nav .el-tabs__item {
        transition: all .2s ease;
    }

    .tabs-content::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 7px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }

    .tabs-content::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #9797a5;
    }

    .tabs-content::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: #c7c7ca;
    }
</style>
